<template>
    <el-dialog ref="dialog" class="dialog-form" title="选择缺陷病害" :visible.sync="visible" width="1000px" :before-close="handleCancel">
        <div class="filter-content">
            <div class="filter-item">
                <RoadSelect :value.sync="form.highwayCode" clearable placeholder="所属公路" @change="init" />
            </div>

            <el-date-picker
                v-model="form.date"
                size="small"
                type="daterange"
                value-format="yyyy-MM-dd"
                :editable="false"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="filter-date"
                @change="init"
            />
        </div>
        <BaseTable
            ref="baseTable"
            v-loading="loading"
            :columns="columns"
            :data="list"
            height="460px"
            highlight-current-row
            @selection-change="handleSelectionChange"
        >
            <template #stake="{ scope: { row } }">
                <!-- 桩号 -->
                <div v-if="row.locationType === 2">
                    <span>{{ row.stake }}</span>
                </div>
                <!-- 设备 -->
                <div v-if="row.locationType === 1">
                    <span>{{ row.facilitiesName }}</span>
                </div>
                <!-- 桩号范围 -->
                <div v-if="row.locationType === 3">
                    <span>{{ `K${row.startStake1}+${row.startStake2}~K${row.endStake1}+${row.endStake2}` }}</span>
                </div>
            </template>
        </BaseTable>
        <div slot="footer" class="dialog-footer">
            <BaseButton type="second" :throttle-time="200" @click="handleCancel">取 消</BaseButton>
            <BaseButton :disabled="selectedList.length === 0" :throttle-time="200" @click="handleAdd">确 定</BaseButton>
        </div>
    </el-dialog>
</template>

<script>
import { InspectionDefectRecordModel } from '@/models'

export default {
    name: 'DefectFormDialog',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        id: {
            type: Number,
            default: null
        },
        defectList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            model: new InspectionDefectRecordModel(),
            loading: false,
            btnLoading: false,
            form: {
                date: []
            },
            list: [],
            selectedList: [],
            columns: Object.freeze([
                {
                    attrs: {
                        type: 'selection'
                    }
                },
                {
                    attrs: {
                        label: '巡查日期',
                        prop: 'inspectDate',
                        width: '130',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '问题描述',
                        prop: 'abnormalDescription',
                        'show-overflow-tooltip': true,
                        'min-width': '140'
                    }
                },
                {
                    attrs: {
                        label: '公路名称',
                        'show-overflow-tooltip': true,
                        prop: 'highwayName',
                        'min-width': '120'
                    }
                },
                {
                    attrs: {
                        label: '位置/桩号',
                        prop: 'location',
                        'show-overflow-tooltip': true,
                        'min-width': '100'
                    }
                }
            ])
        }
    },
    methods: {
        handleSelectionChange(val) {
            this.selectedList = val
        },
        resetForm() {
            this.form = {
                date: []
            }
        },
        async init(type) {
            await this.getList()
            // 修改选中状态
            this.$nextTick(() => {
                this.defectList.forEach((item) => {
                    // 如果是修改页面，要把关联的缺陷添加到选择列表中
                    if (!this.list.some((m) => m.id === item.id)) {
                        this.list.unshift(item)
                    }

                    this.list.some((m) => {
                        if (item.id === m.id) {
                            this.$refs['baseTable'].$refs['table'].toggleRowSelection(m)
                            return true
                        }
                    })
                })
            })
        },
        handleCancel() {
            this.$emit('update:visible', false)
        },
        getList() {
            this.loading = true
            // 获取isDeal未false未处理的缺陷
            const data = {
                ...this.form,
                startDate: this.form.date?.length > 0 ? this.form.date[0] : null,
                endDate: this.form.date?.length > 0 ? this.form.date[1] : null,
                status: 1
            }
            return this.model
                .getList(data, { pageNo: 1, pageSize: 1000 })
                .then((res) => {
                    this.list = res.list || []
                    console.log(this.list)
                })
                .finally(() => {
                    this.loading = false
                })
        },
        handleAdd() {
            this.handleCancel()
            console.log(this.selectedList)
            this.$emit('submit', this.selectedList)
        }
    }
}
</script>

<style lang="scss" scoped>
.filter-content {
    width: 100%;
    margin-bottom: 32px;
    .filter-item {
        display: inline-block;
        width: 150px;
        margin-right: 16px;
    }
    .filter-date {
        width: 300px;
        margin: 0;
    }
}
</style>
